<template>
  <div>
      <!-- 使用三级联动全局组件。已经注册为全局组件，因此不需要再引入 -->
      <TypeNav/>
      <ListContainer/>
      <TodayRecommend/>
      <Rank/>
      <Like/>
      <!-- Floor这个组件，自己在组件内部是没有发送请求的，数据是父组件给的，这样子组件就能在mounted之前把数据循环完了，没有异步操作 -->
      <Floor v-for="(floor) in floorList" :key="floor.id" :list="floor"/>
      <Brand/>
  </div>
</template>

<script>
  import ListContainer from '@/pages/Home/ListContainer';
  import TodayRecommend from '@/pages/Home/TodayRecommend';
  import Rank from '@/pages/Home/Rank';
  import Like from '@/pages/Home/Like';
  import Floor from '@/pages/Home/Floor';
  import Brand from '@/pages/Home/Brand';
  import {mapState} from 'vuex';

  export default {
    name: '',
    components: {
      ListContainer,
      TodayRecommend,
      Rank,
      Like,
      Floor,
      Brand,
    },
    mounted() {
      //派发action,获取floor组件的数据
      this.$store.dispatch("getFloorList");
      //获取用户信息在首页展示
      this.$store.dispatch('getUserInfo');
    },
    computed: {
      ...mapState({
        floorList: state => state.home.floorList
      })
    }
  }  
</script>

<style scoped>

</style>